<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="security"
	uri="http://www.springframework.org/security/tags"%>

<script type="text/javascript">
	$(document).ready(function() {
		$("#alertMess").hide();
		$("#mytable").dataTable();

	});

	function checkConfirmPass() {

		var pass = $("#newpass").val();
		var conpass = $("#confirmednewpass").val();
		if (pass == conpass) {
			return true;
		} else {
			$("#alertMess").show();
			$("#alertMess").html("Confirmed password is different from new password");
			return false;
		}

	}
</script>



<div id="content-outer">
	<!-- start content -->
	<div id="content">

		<!--  start page-heading -->
		<div id="page-heading">
			<h1>Change Customer Information</h1>
		</div>
		<table border="0" width="100%" cellpadding="0" cellspacing="0"
			id="content-table">

			<tr>
				<td id="tbl-border-left"></td>
				<td>
					<div id="content-table-inner">
						<div id="content-table-inner" style="padding-left: 35px;">
							<table border="0" width="100%" cellpadding="0" cellspacing="0">
								<tr valign="top">
									<td>
										<table border="0" cellpadding="0" cellspacing="0" id="id-form">
											<tr>
												<th valign="top">Customer Login Id:</th>
												<td style="padding-left: 10px">${user.loginId }</td>
											</tr>
											<tr>
												<th valign="top">First Name:</th>
												<td style="padding-left: 10px">${customer.firstName }</td>
											</tr>
											<tr>
												<th valign="top">Last Name:</th>
												<td style="padding-left: 10px">${customer.lastName }</td>
											</tr>
											<tr>
												<th valign="top">Middle Name:</th>
												<td style="padding-left: 10px">${customer.midName }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Email 1:</th>
												<td style="padding-left: 10px">${customer.email1 }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Email 2:</th>
												<td style="padding-left: 10px">${customer.email2 }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Address1:</th>
												<td style="padding-left: 10px">${customer.address1 }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Address2:</th>
												<td style="padding-left: 10px">${customer.address2 }</td>
												<td></td>
											</tr>
											<tr>
												<th valign="top">Phone Number:</th>
												<td style="padding-left: 10px">${customer.mobileNumber }</td>
												<td></td>
											</tr>
											<tr>
												<td></td>
												<td style="padding-top: 5px"><input type="submit"
													style="margin-right: 10px" class="btn btn-primary"
													data-toggle="modal" data-target="#myModal"
													value="Change Information" /><input type="submit"
													class="btn btn-primary" data-toggle="modal"
													data-target="#myModalpass" value="Change Password" /></td>

												<td></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</td>
				<td id="tbl-border-right"></td>
			</tr>
			<tr>
				<th class="sized bottomleft"></th>
				<td id="tbl-border-bottom">&nbsp;</td>
				<th class="sized bottomright"></th>
			</tr>
		</table>


		<!-- Modal change info-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">Change information</h4>
					</div>
					<div class="modal-body">
						<form action="checkInfo" method="post">
							<table border="0" cellpadding="0" cellspacing="0" id="id-form">
								<tr>
									<th valign="top">First Name:</th>
									<td><input type="text" class="inp-form" name="firstName" /></td>
								</tr>
								<tr>
									<th valign="top">Last Name:</th>
									<td><input type="text" class="inp-form" name="lastName" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Middle Name:</th>
									<td><input type="text" class="inp-form" name="midName" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Email 1:</th>
									<td><input type="text" class="inp-form" name="email1" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Email 2:</th>
									<td><input type="text" class="inp-form" name="email2" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Address 1:</th>
									<td><input type="text" class="inp-form" name="address1" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Address 2:</th>
									<td><input type="text" class="inp-form" name="address2" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Phone Number:</th>
									<td><input type="text" class="inp-form"
										name="mobileNumber" /></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td style="padding-top: 5px"><input type="submit"
										value="Change" id="changeInfo" class="btn btn-primary"
										style="margin-right: 10px" /></td>

									<td></td>
								</tr>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal change pass -->
		<div class="modal fade" id="myModalpass" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">Change information</h4>
					</div>
					<div class="modal-body">
					 
						<div class="alert alert-warning" role="alert" id="alertMess"></div>
						<br>
						<form action="changePass" method="post">
							<table border="0" cellpadding="0" cellspacing="0" id="id-form">
								<tr>
									<th valign="top">New Password:</th>
									<td><input type="text" class="inp-form" name="newpass"
										id="newpass" /></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Confirmed New Password:</th>
									<td><input type="text" class="inp-form"
										name="confirmednewpass" id="confirmednewpass" /></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td style="padding-top: 5px"><input type="submit"
										value="Change" id="changeInfo" class="btn btn-primary"
										onclick="return checkConfirmPass();"
										style="margin-right: 10px" /></td>

									<td></td>
								</tr>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- End Modal Add Card -->

<table id="mytable">
	<thead>
		<tr>
			<th>Account Number</th>
			<th>Account State</th>
			<th>Account Type</th>
			<th>Balance</th>
			<th>Customer Id</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="account" items="${accountList}">
			<tr>
				<td>${account.accountNumber}</td>
				<td>${account.accountState}</td>
				<td>${account.type}</td>
				<td>${account.balance}</td>
				<td>${user.loginId }</td>
			</tr>
		</c:forEach>
	</tbody>
</table>

<br />
</div>
<div class="clear">&nbsp;</div>
</div>

